<div>
	<div class="titleSection">
		<div class="floatleft width360 marginTop">
			<table>
				<tr>
					<td><label class="displayBlock bold marginBottom5">Filters:&nbsp;&nbsp;&nbsp;&nbsp;</label></td><td>
					<input type="text" class="width256 floatleft spacing" placeholder="filter text here.." data-bind="value: nameSearch, valueUpdate: 'afterkeydown'" />
					</td>
				</tr>
			</table>

		</div>
		<div class="clearBoth"></div>
	</div>
	<!--BO Added Facilities -->
	<div class="containerWhiteAddFaci border-bottom" id="teachingStaff">
		<div class="scroll-pane6">
			<table id="t" cellspacing="0" cellpadding="0" class="tablesorter"  data-bind="triggerUpdate: staffArr">
				<thead>
					<tr class="border-bottom">
						<th ></th>
						<th >Teachers</th>
						<th >Subjects</th>
						<th >Class Teacher</th>
						<th >Contact</th>
						<th >Periods per week</th>
						<th ></th>
					</tr>
				</thead>

				<tbody data-bind="foreach: filteredRecords">
					<tr >
						<td data-bind="text:$index()+1" width="10">Error</td>
						<td  width="140"><span data-bind="text:title"> <a href="#">Error</a></span><span data-bind="text:name"> </td>
						<td data-bind="text:subjectsStr" width="160">Error</td>
						<td  width="80"></span><!-- ko if: isClassTeacher() --><span style="color: orange" data-bind="text:classTitle"> </span><!--/ko--></td>
						<td data-bind="text:contactNumber" width="80">Error</td>
						<td data-bind="text:allocationStr" width="90">Error</td>
						<td width="40"><a href="#." class="teacherDtl" data-bind="click:openDetailsDialog">Details</a></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

	<!--EO Add Facilities -->

</div>
<!--EO Main Content -->

<!--BO Popup Content -->

<div data-bind="dialog: {width:'940', modal : 'true', 'autoOpen': false }, dialogVisible: isOpen" title="view Teacher Utilization">
	<div class="scroll-paneTeachingStaff" style="height: 450px !important;">
		<span data-bind="text:title"></span>
		<div class="sectionContainer" data-bind="with:currentContent()" >

			<h2 class="title2"  ><span data-bind="text:title"></span><span data-bind="text:name">Mrs. Dipti Aradkar</span></h2>
			<span class="displayBlock marginBottom5" data-bind="text:contactNumber">Contact Number: 9655402221</span>
			<span class="displayBlock marginBottom30" data-bind="text:emailAddress">Email: d.aradkar@wkschool.edu</span>

			<h3 class="marginBottom5">Teaching Details</h3>
			<table id="t" cellspacing="0" cellpadding="0" class="schoolEventstable">
				<thead>
					<tr class="border-bottom">
						<th width="25%">Section</th>
						<th>
						<table>
							<thead>
								<tr>
									<th width="25%">Subjects</th><th width="25%">Classes</th><th width="25%">Periods per week</th>
								</tr>
						</table><thead></th>
					</tr>
				</thead>
				<tbody>
					<!-- ko foreach: section -->
					<tr>
						<td  data-bind="text:sectionTitle" style="vertical-align:middle" width="25%">Primary</td>
						<td width="75%"><!-- ko foreach: subject -->
						<table width="100%">
							<tr>
								<td data-bind="text:subjectTitle" width="33%"></td>
								<td width="33%"><!-- ko foreach: classDetail --><span data-bind="text:classTitle"></span><!-- /ko --></td>
								<td width="34%"><span data-bind="text:allocation"></span> periods</td>

							</tr>
						</table><!-- /ko --></td>
					</tr>
					<!-- /ko -->
				</tbody>
			</table>
		</div>
	</div>
	<div class="bottomButton">
		<a data-bind="click: close" href="#" class="te-button buttonBlue floatleft">Close</a>
		<div class="clearBoth"></div>
	</div>
</div>
<!--EO Popup Content -->